import { Button, Image, Modal, Space, Tabs } from "antd";
import React, { useState } from "react";

function Donate(props) {
	const { mask } = props;
	const [open, setOpen] = useState(false);
	const [check, setCheck] = useState("1");

	function closeModal() {
		setOpen(false);
	}

	function openModal() {
		setOpen(true);
	}

	const item = [
		{
			key: "1",
			label: "微信",
			children: (
				<Image
					src=""
					height={260}
					preview={{
						mask: "预览大图",
						maskClassName: "maskStyle",
						getContainer: () => document.body,
					}}
					style={{ borderRadius: "8px", width: "auto" }}
				/>
			),
		},
		{
			key: "2",
			label: "支付宝",
			children: (
				<Image
					src=""
					height={260}
					preview={{
						mask: "预览大图",
						maskClassName: "maskStyle",
						getContainer: () => document.body,
					}}
					style={{ borderRadius: "8px", width: "auto" }}
				/>
			),
		},
	];

	function showColor() {
		if (check === "1") {
			return "#02C160";
		} else if (check === "2") {
			return "#1678FF";
		}
	}

	function showMask() {
		return mask === 0 ? false : true;
	}

	return (
		<>
			{/* eslint-disable-next-line */}
			<a onClick={openModal} rel="noreferrer">
				捐赠支持
			</a>
			{open ? (
				<Modal
					open={open}
					title={
						<div style={{ textAlign: "center", fontSize: "18px" }}>
							捐赠支持
						</div>
					}
					centered
					transitionName=""
					style={{
						position: "relative",
						borderRadius: "8px",
						overflow: "hidden",
					}}
					onCancel={closeModal}
					footer={
						<div style={{ display: "flex", justifyContent: "center" }}>
							<Button
								type="primary"
								onClick={closeModal}
								style={{ backgroundColor: showColor() }}
							>
								下次一定
							</Button>
						</div>
					}
					mask={showMask()}
					focusTriggerAfterClose={false}
				>
					<div
						style={{
							position: "absolute",
							bottom: "-6px",
							left: "0px",
							width: "100%",
						}}
					>
						<img
							src="./images/donateBackground.svg"
							alt=""
							style={{ width: "100%" }}
						/>
					</div>
					<Space
						style={{ width: "100%", justifyContent: "center" }}
						direction="vertical"
					>
						<p style={{ fontSize: "12px", textAlign: "center" }}>
							如果觉得不错，不妨支持一下？
						</p>
						<p style={{ fontSize: "12px", textAlign: "center" }}>
							我们将持续优化产品并创造更多好用的产品。
						</p>
					</Space>
					<Tabs
						defaultActiveKey={check}
						centered
						items={item}
						style={{
							display: "flex",
							alignItems: "center",
						}}
						onChange={(e) => {
							setCheck(e);
						}}
					/>
				</Modal>
			) : null}
		</>
	);
}

export default Donate;
